<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<!--title:页面要显示的标题-->
<th:block th:fragment="commonQuery(title, cssStyle,className,toggle, id)">
    <input id="title" type="hidden" th:value="${title}">
    <input id="cssStyle" type="hidden" th:value="${cssStyle}">
    <input id="className" type="hidden" th:value="${className == ''? 'col-sm-12': className}">
    <input id="toggle" type="hidden" th:value="${toggle}">
    <input id="id" type="hidden" th:value="${id}">

    <a th:id="${id}+Toggle" th:if="${toggle != '' && toggle}"
       style="z-index:9999;position: fixed;top:200px;width:15px;text-align: center;height: 100px;background: #1ab394;color: white;cursor: pointer"><i style="line-height: 100px" class="fa fa-chevron-left"></i></a>

    <div th:id="${id}" th:class="${className == ''? 'col-sm-12': className}" th:style="${cssStyle}">
        <div class="ibox" style="margin-bottom: 0">
            <!-- TITLE -->
            <div class="ibox-title" th:if="${title != ''}">
                <h5 th:text="${title}"></h5>
                <div class="ibox-tools" th:id="${id}+Tools"></div>
            </div>
            <!-- CONTENT -->
            <div class="ibox-content">
            </div>
        </div>
    </div>
</th:block>

<script type="text/javascript">
    $(document).ready(function () {
        var id = $("#id").val();
        // 添加工具栏
        $('#'+id+'Tools').prepend($('#'+id+'Toolbar').children());
        // 绑定toggle
        $('#'+id+'Toggle').click(function () {
            if($('#'+id).is(':visible')){ // 显示
                $(this).find('i').removeClass('fa-chevron-left').addClass('fa-chevron-right');
            } else {
                $(this).find('i').removeClass('fa-chevron-right').addClass('fa-chevron-left');
            }
            $('#'+id).toggle();
        });
    });
</script>
</html>